<template>
  <div :class="['form-select', disabled ? 'disabled' : '']">
    <el-select :style="selectStyle" :disabled="disabled" filterable v-model="value" size="mini" @change="handleSelectChange">
      <el-option v-for="item in dicData" :key="item.id" :label="item.label" :value="item.value"> </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    dicData: {
      type: Array,
      default: () => []
    },
    tdStyle: {},
    x: {
      type: Number,
      default: 0
    },
    y: {
      type: Number,
      default: 0
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    selectStyle() {
      return {
        width: parseInt(this.tdStyle.width) - 10 + 'px',
        height: parseInt(this.tdStyle.height) - 8 + 'px'
      };
    }
  },
  mounted() {},
  watch: {
    dicData: {
      handler(val) {},
      immediate: true,
      deep: true
    }
  },
  methods: {
    handleSelectChange(value) {
      this.$emit('change', {
        value,
        x: this.x,
        y: this.y
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.form-select {
  // padding: 3px 5px;
  box-sizing: border-box;
  &.disabled {
    pointer-events: none;
  }
  ::v-deep .el-input {
    height: 100%;
    .el-input__inner {
      height: 100%;
    }
    .el-input__icon {
      line-height: 100%;
    }
  }
}
</style>
